<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
<title>查看个人简介</title>
<style type="text/css">
.form-horizontal .control-group {
  float: left;
  margin-right: 5px;
  margin-bottom: 0;
}
.form-horizontal .control-label {
  width: 55px;
}
.form-horizontal .controls {
  margin-left: 60px;
}
i {
  margin-right: 5px;
  cursor: pointer;
}
.profile_card {
  margin: 10px 0;
}
.profile_card .avatar {
  margin-right: 20px;
}
#username {
  line-height: 26px;
  font-size: 24px;
}
#latest_job {
  line-height: 20px;
  padding: 1px 0;
  font-size: 16px;
}
#hukou {
  line-height: 17px;
  font-size: 13px;
  color: #666;
}
#edit_profile_modal {
  width: 800px;
  margin-left: -400px;
}
</style>
<script>
  // arr[m][n]
  // m: 0: education, 1: working_experience
  // n: 0: template, 1: index, 2: order, 3: initial_json
  var arr = new Array();
  $(document).ready(function() {
    arr[0] = create('cv_education_list', '${cv.curCvLang.educationJson}');
    arr[1] = create('cv_working_experience_list', '${cv.curCvLang.workingExperienceJson}');
    renderCvEducations(arr[0][3]);
    renderCvWorkingExperiences(arr[1][3]);
    renderLatestJob(arr[1][3]);
    initHukouProvinceCitySelect();

    $('#username i').click(function() {
      $('#username').hide();
      $('#username_edit').show().find('input').focus();
    });
    $('#username_edit .btn').click(function() {
      $('#username').show();
      $('#username_edit').hide();
    }).first().click(function() {
      // 保存真实姓名
    });
    $('#hukou i').click(function() {
      $('#hukou').hide();
      $('#hukou_edit').show().find('input').focus();
    });
    $('#hukou_edit .btn').click(function() {
      $('#hukou').show();
      $('#hukou_edit').hide();
    }).first().click(function() {
      // 保存户口所在地
    });
  });
  function create(list, json) {
    console.log("1:" + list + ":" + json);
    var xj = $.parseJSON(json);
    for (var i = 0; i < xj.length; i++) {
      xj[i].index = i;
    }
    return new Array(Tempo.prepare(list), xj.length - 1, xj.length == 0 ? 0 : xj[xj.length - 1].order, xj);
  }
  function renderCvEducations(jsons) {
    if (jsons.length > 0) {
      arr[0][0].append(jsons)
    }
  }
  function renderCvWorkingExperiences(jsons) {
    if (jsons.length > 0) {
      arr[1][0].append(jsons)
    }
  }
  function renderLatestJob(jsons) {
    var template1 = Tempo.prepare('latest_job');
    var template2 = Tempo.prepare('edit_last_job');
    if (jsons.length > 0) {
      template1.render([jsons[jsons.length - 1]]);
      template2.render([jsons[jsons.length - 1]]);
    }
  }

  function initHukouProvinceCitySelect() {
    $('#edit_hukou_province').change(function() {
      var container = $('#edit_hukou_city_container');
      var cities = $('#edit_hukou_city');
      cities.children('option[value!="0"]').appendTo(container);
      var number = container.children('[value^=' + $(this).val() + ']').appendTo(cities).length;
      cities.children(number === 1 ? ':last' : ':first').attr('selected', '');
    }).children('[value="' + '${memberUser.hukou}'.substr(0, 2) + '"]').attr('selected', '').end().change();
    $('#edit_hukou_city').children('[value="${memberUser.hukou}"]').attr('selected', '');
  }
</script>
</head>

<body>
  <div class="form-horizontal">
    <div id="basic_info">
      <div>
        <div class="profile_card">
          <c:if test="${not empty memberUser.avatarUrl}">
          <div class="avatar pull-left"><img src="${memberUser.avatarUrl}"></div>
          </c:if>
          <div class="pull-left">
            <div id="username"><i class="icon-edit pull-left"></i> ${memberUser.realName}</div>
            <div id="username_edit" class="hide">
              <div class="control-group">
                <label for="edit_realname" class="control-label">姓名:</label>
                <div class="controls">
                  <input type="text" name="memberUser.realName" value="${memberUser.realName}" class="input-large"/>
                </div>
              </div>
              <a href="#" class="btn btn-primary">确定</a><a href="#" class="btn">取消</a>
            </div>
            <div id="latest_job" data-template><i class="icon-edit pull-left"></i> ${memberUser.headline}</div>
            <div id="hukou" data-after-template><i class="icon-edit pull-left"></i> ${memberUser.residenceName}</div>
            <div id="hukou_edit" class="hide">
              <div class="control-group">
                <label for="cv_base_hukou" class="control-label">户口:</label>
                <div class="controls">
                  <form:select id="edit_hukou_province" path="memberUser.hukou" class="span2">
                    <option value="0">--- 请选择 ---</option>
                    <form:options items="${_provinces}" itemLabel="name" itemValue="id" />
                  </form:select>
                  <select id="edit_hukou_city" class="span2">
                    <option value="0">--- 请选择 ---</option>
                  </select>
                  <form:select id="edit_hukou_city_container" path="memberUser.hukou" items="${_cities}" itemLabel="name" itemValue="id" class="hide"/>
                </div>
              </div>
              <a href="#" class="btn btn-primary">确定</a><a href="#" class="btn">取消</a>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="hide">最近动态</div>
    <div>背景资料
      <div>
        <div>概述</div>
      </div>
      <div>
        <div>工作经验</div>
        <div id="cv_working_experience_list">
          <div id="cv_working_experience_{{index}}" data-template>
            <div class="job_title">{{position}}{%if department%} - {{department}}{%endif%}</div>
            <div class="company">{{company}}</div>
            <div class="duration">{{startDate}} - {%if endDate%}{{endDate}}{%else%}至今{%endif%}</div>
            <div class="description">{{description}}</div>
          </div>
        </div>
      </div>
      <div>
        <div class="hide">语言能力</div>
      </div>
      <div class="hide">
        <div>技能专长</div>
      </div>
      <div>
        <div>教育经历</div>
          <div id="cv_education_list" class="control-group">
            <div id="cv_education_{{index}}" class="control-group" data-template>
              <div>{{school}}</div>
              <div>{{degreeName}}{%if major%}，{{major}}{%endif%}</div>
              <div>{{startDate}} - {%if endDate%}{{endDate}}{%else%}至今{%endif%}</div>
              <div>{{majorDescription}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="edit_profile_modal" class="modal hide fade">
    <div class="modal-header">
      <div class="row">
        <div class="pull-right">
        <a href="#" class="btn btn-primary" id="select_industry_modal_ok">确定</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">取消</a>
        </div>
      </div>
    </div>
    <div class="modal-body">
      <form id="profile_card_form" class="form-horizontal">
        <legend><small>当前工作情况</small></legend>
        <div id="edit_last_job" data-template>
          <div class="control-group">
            <label for="edit_last_job_company" class="control-label">公司:</label>
            <div class="controls">
              <input type="text" id="edit_last_job_company" name="memberUser.realName" value="{{company}}" class="input-large"/>
            </div>
          </div>
          <div class="control-group">
            <label for="edit_last_job_department" class="control-label">部门:</label>
            <div class="controls">
              <input type="text" id="edit_last_job_department" name="memberUser.realName" value="{%if department%}{{department}}{%endif%}" class="input-large"/>
            </div>
          </div>
          <div class="control-group">
            <label for="edit_last_job_position" class="control-label">职位:</label>
            <div class="controls">
              <input type="text" id="edit_last_job_position" name="memberUser.realName" value="{{position}}" class="input-large"/>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>
